<!-- 数据切割进行中页面-抽屉组件-数据项列表 -->
<template>
  <a-drawer title="数据项" placement="bottom" :visible="visible" size="small" @close="modalClose" :style="{ padding: 0 }">

    <template #extra>
      <div class="allSize">总大小：<span>{{ allSize }}</span></div>
      <a @click="downLoadAll">批量下载</a>
      <!-- <input type="file" @change="downLoadAll" /> -->
    </template>

    <a-table :columns="columns" :data-source="dataSource" :pagination="false" :loading="loading"
      rowKey="splitSegyFileInfoId" size="small" class="ks-table" @resizeColumn="handleResizeColumn" sticky>
      <template #headerCell="{ column }">
        <div v-if="column.dataIndex === 'action'">
          <a-checkbox v-model:checked="Allchecked" @change="change"></a-checkbox>
        </div>
      </template>
      <template #bodyCell="{ column, index, record }">
        <template v-if="column.dataIndex === 'index'">
          {{ index + 1 }}
        </template>
        <template v-if="column.dataIndex === 'action'">
          <!-- <a @click="downLoad(record.
            )">下载</a> -->
          <!-- <a @click="downLoad(record.splitSegyFileInfoId)">下载</a> -->
          <a-checkbox v-model:checked="record.checked" @change="changeCheck"></a-checkbox>
        </template>
      </template>

    </a-table>
  </a-drawer>
</template>

<script>
import { message } from 'ant-design-vue';
import axios from 'axios'
import { sizeAdd } from "@/utils/es_string"
import { getOrderDataItems } from "@/api/dataDownloadPublish"
export default {
  name: "DialogViewItems",
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          width: 70,
          align: "center",
          show: true,
          resizable: true,
        },
        {
          title: "项目名称",
          dataIndex: "projectName",
          width: 250,
          ellipsis: true,
          align: "left",
          resizable: true,
          show: true,
        },
        {
          title: "文件名称",
          dataIndex: "fileName",
          width: 180,
          ellipsis: true,
          align: "left",
          show: true,
          resizable: true,
        },
        {
          title: "文件大小",
          dataIndex: "fileSize",
          width: 100,
          align: "center",
          show: true,
          resizable: true,
        },
        {
          title: "文件类型",
          dataIndex: "fileType",
          width: 100,
          align: "center",
          show: true,
          resizable: true,
        },
        {
          title: "切割文件大小",
          dataIndex: "splitFileSize",
          width: 150,
          ellipsis: true,
          align: "center",
          show: true,
          resizable: true,
        },
        {
          title: "勘探类型",
          dataIndex: "projectType",
          width: 100,
          align: "center",
          show: true,
          resizable: true,
          customRender: ({ text }) => {
            return text === "3" ? "三维" : text === "2" ? "二维" : "";
          },
        },
        // {
        //   title: '备注',
        //   dataIndex: 'comment',
        //   width: 100,
        //   align: 'center',
        //   show: true,
        //   ellipsis: true,
        //   resizable: true,
        // },
        {
          title: "操作",
          dataIndex: "action",
          width: 100,
          align: "center",
          // fixed: "right"
        }
      ],
      loading: false,
      visible: true,
      hrefUrl: "",
      selectedRowKeys: [],
      dataSource: null,
      Allchecked: false,
      allSize: '0b'
    };
  },
  props: {
    // splitSegyFileInfoId 每一条的唯一id
    ObjRecord: {
      type: Object,
    },
    // 订单里面分配的数据切割
    id: {
      type: Number
    },
    // 订单id
    orderId: {
      type: [Number, String],
    },
    // 项目名-保存文件的文件夹名
    orderName: {
      type: String
    }
  },
  emits: ["close"],
  methods: {
    // 批量下载
    async downLoadAll() {
      const List = this.dataSource.filter(item => item.checked)
      if (!List || List.length === 0) return message.warning("请选择要下载的文件")
      const fileName = this.orderId ? this.orderName : this.ObjRecord.projectName
      const projectJobId = this.orderId ? this.orderId : this.ObjRecord.projectJobId
      const dataList = {
        fileName,
        projectJobId,
        children: []
      }
      dataList.children = List.map(item => {
        return {
          id: item.splitSegyFileInfoId,
          url: `${axios.defaults.baseURL}/download/downloadSplitFile/${item.splitSegyFileInfoId}`,
          fileName: item.fileName,
          fileSize: item.splitFileSize, // 文件大小
          projectJobId,
        }
      })
      console.log(dataList);
      const isDownload = await window.versions.downLoadFile(dataList)
      isDownload && message.success("开始下载，请在传输中查看")
    },
    // downLoadAll() {
    //   let List = [
    //     "https://dldir1v6.qq.com/weixin/Windows/WeChatSetup.exe",
    //     "https://dldir1.qq.com/qqfile/qq/QQNT/Windows/QQ_9.9.12_240708_x64_01.exe",
    //     "https://ac1bba-3085845052.antpcdn.com:19001/b/pkg-ant.baidu.com/issue/netdisk/yunguanjia/BaiduNetdisk_7.19.0.18.exe",
    //     "https://dldir1.qq.com/qqtv/TencentVideo11.98.7327.0.exe"
    //   ]

    //   const dataList = {
    //     fileName: "项目test",
    //     projectJobId: 200,
    //     children: []
    //   }
    //   dataList.children = List.map((item, index) => {
    //     return {
    //       // url: `${location.origin}/api/download/downloadSplitFile/${item.splitSegyFileInfoId}`,
    //       // url: `${axios.defaults.baseURL}download/downloadSplitFile/${item.splitSegyFileInfoId}`,
    //       url: item,
    //       fileName: item.split('/')[item.split('/').length - 1],
    //       fileSize: "5GB", // 文件大小
    //       projectJobId: 200,
    //       index
    //     }
    //   })
    //   console.log(dataList);
    //   message.success("成功喽")
    //   window.versions.downLoadFile(dataList)
    // },
    modalClose() {
      this.$emit("close", false);
    },
    handleResizeColumn(w, col) {
      col.width = w;
    },
    // 全选
    change() {
      this.dataSource.map(item => item.checked = this.Allchecked)
      this.changeCheck()
    },
    changeCheck() {
      const checkedArr = this.dataSource.map(item => {
        if (item.checked && item.splitFileSize && item.splitFileSize.length > 1) {
          return item.splitFileSize
        }
      }).filter(Boolean)
      this.allSize = sizeAdd(checkedArr)
    },
    async getList() {
      try {
        this.loading = true
        const res = await getOrderDataItems({ flowTaskId: this.id })
        res.splitJobFile.map(item => {
          item.projectJobs.map(it => {
            this.dataSource = it.splitSegyFileInfoList
          })
        })
      } catch (error) {
        message.error(error.message ?? "获取切割任务失败")
        this.modalClose()
      } finally {
        this.loading = false
      }
    }
  },
  created() {
    if (this.$customer === 'zhy' && this.id) {
      this.getList()
    } else {
      this.dataSource = this.ObjRecord.splitSegyFileInfoList
    }
  }
}
</script>

<style lang="scss" scoped>
.ks-table {
  margin: -24px;
  max-width: fit-content;
}

:deep(.ant-table-sticky-holder) {
  transform: translateY(-25px);
}

.allSize {
  display: inline-block;
  transform: translateX(-20px);
  border-right: 1px solid #ebebeb;
  padding-right: 20px;

  span {
    color: red;
    font-weight: 600;
  }
}
</style>
